<template>
  <div class="container">
    <!-- <VueEditor></VueEditor> -->
    <!-- <VueHtml5Editor :content="content" :height="500"></VueHtml5Editor> -->
    <quill-editor
      ref="myQuillEditor"
      v-model="content"
      :options="editorOption"
      @input="onEditorInput($event)"
    />
  </div>
</template>
<script>
// import { VueEditor } from "vue2-editor";
// import VueHtml5Editor from "vue-html5-editor";
import { quillEditor, Quill } from "vue-quill-editor";
import { ImageExtend, QuillWatch } from "quill-image-extend-module";
Quill.register("modules/ImageExtend", ImageExtend); //注册扩展模块
export default {
  name: "index",
  props: ["value"],
  components: {
    quillEditor,
  },
  data() {
    return {
      content: this.value,
      // 富文本编辑器内容
      flag: "",
      labelPosition: "left",
      editorOption: {
        placeholder: "请输入内容",
        modules: {
          ImageExtend: {
            loading: true,
            name: "file",
            action: "/home/file/upload",
            response: (res) => {
              console.log(res, "123123");
              return this.api.imageUrl + res.data;
            },
          },
          toolbar: {
            container: [
              // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
              ["bold", "italic", "underline", "strike"],
              // 引用  代码块-----['blockquote', 'code-block']
              ["blockquote", "code-block"],
              // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
              [{ header: 1 }, { header: 2 }],
              // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
              [{ list: "ordered" }, { list: "bullet" }],
              // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
              [{ script: "sub" }, { script: "super" }],
              // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
              [{ indent: "-1" }, { indent: "+1" }],
              // 文本方向-----[{'direction': 'rtl'}]
              [{ direction: "rtl" }],
              // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
              [{ size: ["small", false, "large", "huge"] }],
              // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
              [{ header: [1, 2, 3, 4, 5, 6, false] }],
              // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
              [{ color: [] }, { background: [] }],
              // 字体种类-----[{ font: [] }]
              [{ font: [] }],
              // 对齐方式-----[{ align: [] }]
              [{ align: [] }],
              // 清除文本格式-----['clean']
              ["clean"],
              // 链接、图片、视频-----['link', 'image', 'video']
              ["image"],
            ],
            handlers: {
              image: function () {
                QuillWatch.emit(this.quill.id);
              },
            },
          },
        },
      },
    };
  },
  created() {},
  methods: {
    onEditorInput(quill) {
      // quill直接就是文本内容
      // console.log("editor change!", quill);
      this.$emit("input", quill);
    },
  },
};
</script>

<style scoped>
.container {
  width: 1000px;
  margin: auto;
}
</style>
